<template>
	<view>
		<view class="rows m-bot24 p-re" v-if="pageData.state == '-1'"
		     @click="toAddress">
		   <image :src="$imgUrls(pageData.bjImg)" mode="widthFix" class="rows"></image>
		  <!-- <view class="infoTip d-flex f-column j-se">
			   <view class="Tip size30 bold">请提前两天发起安装预约</view>
			   <view class="rows">
				   <view class="Now">立即预约</view>
			   </view>		   
		   </view> -->
		</view>
		
		
		<view class="row f-column bgwhite m-bot24 padding30" v-if="pageData.state == '0'">
			<text class="color_33 size26 bold">安装预约</text>
			<text class="color_33 h6 m-top24">预约时间：{{pageData.reservationDate}}</text>
			<text class="color_f8 h6 m-top10">等待分配安装人员</text>
		</view>
		
		<view class="row f-column bgwhite m-bot24 padding30" v-if="pageData.state == '1'">
			<text class="color_33 size26 bold">安装预约</text>
			<text class="color_33 h6 m-top24">预约时间：{{pageData.reservationDate}}</text>
			<text class="color_33 h6 m-top10">安装人员：{{pageData.res_name}}</text>
			<view class="d-flex a-center m-top10" @click.stop="$common.Tel(pageData.res_tel)">
				<text class="color_33 h6">联系电话：{{pageData.res_tel}}</text>
				<image :src="$online('tel.png')" class="tel m-left20"></image>
			</view>
			
			<view class="d-flex a-center m-top10">
				<text class="color_33 h6">验 证 码：</text>
				<text class="color_61 h6 bold500">{{pageData.code}}</text>
			</view>
		</view>
		
		
		<view class="row f-column bgwhite m-bot24 padding30" v-if="pageData.state == '2'">
			<text class="color_33 size26 bold">安装完成</text>
			<text class="color_33 h6 m-top24">预约时间：{{pageData.reservationDate}}</text>
			<text class="color_33 h6 m-top10">安装人员：{{pageData.res_name}}</text>
			<view class="d-flex a-center m-top10" @click.stop="$common.Tel(pageData.res_tel)">
				<text class="color_33 h6">联系电话：{{pageData.res_tel}}</text>
				<image :src="$online('tel.png')" class="tel m-left20"></image>
			</view>
			
				<text class="color_33 h6 m-top10">完成时间：{{pageData.endDate}}</text>
		</view>
		
		
		
		<view class="row f-column bgwhite m-bot24 padding30" v-if="pageData.state == '3'">
			<text class="color_33 size26 bold">安装失败</text>
			<text class="color_33 h6 m-top24">预约时间：{{pageData.reservationDate}}</text>
			<text class="color_33 h6 m-top10">安装人员：{{pageData.res_name}}</text>
			<view class="d-flex a-center m-top10" @click.stop="$common.Tel(pageData.res_tel)">
				<text class="color_33 h6">联系电话：{{pageData.res_tel}}</text>
				<image :src="$online('tel.png')" class="tel m-left20"></image>
			</view>
			
			<text class="color_f8 size28 m-top20">{{pageData.end_content}}</text>
			
			<view class="row">
				<image :src="$imgUrls(item)" mode="aspectFill" class="reloImg" 
				     v-for="(item,index) in pageData.endPhotoArr" :key="index"
					 @click="$common.previewImgs(index,pageData.endPhotoArr)"></image>
			
			</view>
			<view class="row j-centert color_33 h6 m-top30">请与客服沟通后重复发起安装预约</view>
			<view class="row j-centert m-top30">
				<view class="Now" @click.stop="toAddress">立即预约</view>
			</view>	
		</view>
		
	</view>
</template>

<script>
	export default {
		name:'InstallStarte',
		props:['pageData','order_id','detail'],
		data() {
			return {
				
			}
		},
		
		methods: {
			toAddress(){
				const name = this.detail.uname;
				const tel = this.detail.utel;
				this.toUrl(`installAddress?order_id=${this.order_id}&name=${name}&tel=${tel}`)
			}
		},
		
		
	}
</script>

<style lang="scss" scoped>
	.infoTip{
		width:690rpx;
		height: 100%;
		position: absolute;
		top:0;
		left:30rpx;
	}
	.Tip{
		color:#476EB1;
	}
	.Now{
		min-width:140rpx;
		height: 44rpx;
		background: #78A9FF;
		border-radius: 8rpx;
		text-align: center;
		line-height: 44rpx;
		color:#ffffff;
		font-size:22rpx;
		display: inline-block;
	}
	.color_47{
		color:#476EB1
	}
	.color_61{
		color:#61B7FF;
	}
	.color_f8{
		color:#FF812A;
	}
	.tel{
		width:30rpx;
		height: 30rpx;
	}
	.reloImg{
		width:160rpx;
		height: 160rpx;
		border-radius: 8rpx;
		margin-right: 16rpx;
		margin-top:30rpx;
	}
	.reloImg:nth-child(4n){
		margin-right: 0;
	}
</style>
